export function Chart(domId) {
  var canvas = document.getElementById(domId)
  var ctx = canvas.getContext('2d')
  var W = canvas.width
  var H = canvas.height
  var deg = 0
  // eslint-disable-next-line
  var new_deg = 0
  // eslint-disable-next-line
  var dif = 0
  var text, text_w
  var R = W < H ? W : H// 先默认环半径为canvas宽度
  var bgR = (R - R / 3) / 2// 内环背景半径
  var linkW = R / 2 - bgR// 环宽度=(W/2-内半径)
  var inW = linkW / 3// 内环宽度=环宽度*1/3
  var outW = linkW * 2 / 3// 外环宽度=环宽度*2/3
  var inR = bgR + inW / 2// 内环半径=内半径+内环宽度/2
  var outR = bgR + inW + outW / 2// 外环半径=内半径+内环宽度+外环宽度/2
  var $this = this
  $this.ratePieNoAnimation = function(number) {
    deg = 360 * number / 100
    // 底色大
    ctx.clearRect(0, 0, W, H)
    ctx.beginPath()
    const grd = ctx.createLinearGradient(0, H, W, 0)// 颜色渐变的起始坐标和终点坐标
    grd.addColorStop(0, '#74DE1C')
    grd.addColorStop(0.3, '#9DDE12')
    grd.addColorStop(0.6, '#B2ED2E')
    grd.addColorStop(1, '#CBF76C')
    ctx.strokeStyle = grd// 生成的颜色块赋值给样式
    ctx.lineWidth = outW
    ctx.arc(W / 2, H / 2, outR, 0, Math.PI * 2, false)
    ctx.stroke()

    // 底色小
    ctx.beginPath()
    const grd1 = ctx.createLinearGradient(W, 0, 0, H)
    grd1.addColorStop(0, '#74DE1C')
    grd1.addColorStop(0.3, '#9DDE12')
    grd1.addColorStop(0.6, '#B2ED2E')
    grd1.addColorStop(1, '#CBF76C')
    ctx.strokeStyle = grd1
    ctx.lineWidth = inW
    ctx.arc(W / 2, H / 2, inR, 0, Math.PI * 2, false)
    ctx.stroke()

    // 圆心背景
    ctx.beginPath()
    ctx.fillStyle = '#D9E5E5'
    ctx.arc(W / 2, H / 2, bgR, 0, Math.PI * 2, false)
    ctx.fill()

    // 外层
    var r = deg * Math.PI / 180
    ctx.beginPath()
    var grd2 = ctx.createLinearGradient(0, H, W, 0)
    grd2.addColorStop(0, '#8BEAF5')
    grd2.addColorStop(0.3, '#22A4D4')
    grd2.addColorStop(0.6, '#0B72BD')
    grd2.addColorStop(1, '#0A5DA0')
    ctx.strokeStyle = grd2
    ctx.lineWidth = outW
    ctx.arc(W / 2, H / 2, outR, 0 - 90 * Math.PI / 180, r - 90 * Math.PI / 180, false)
    ctx.stroke()
    // 内层
    ctx.beginPath()
    var grd3 = ctx.createLinearGradient(W, 0, 0, H)
    grd3.addColorStop(0, '#8BEAF5')
    grd3.addColorStop(0.3, '#22A4D4')
    grd3.addColorStop(0.6, '#0B72BD')
    grd3.addColorStop(1, '#0A5DA0')
    ctx.strokeStyle = grd3
    ctx.lineWidth = inW
    ctx.arc(W / 2, H / 2, inR, 0 - 90 * Math.PI / 180, r - 90 * Math.PI / 180, false)
    ctx.stroke()

    ctx.fillStyle = '#000'
    ctx.font = 'bold ' + R / 4 + 'px Arial'
    text = Math.floor(deg / 360 * 100) + '%'
    text_w = ctx.measureText(text).width
    ctx.fillText(text, W / 2 - text_w / 2, H / 2 + R / 10)
  }

  $this.ratePie = function(number) {
    var i = 0
    var t = setInterval(function() {
      if (i === number) {
        clearInterval(t)
      } else {
        number > 0 ? i++ : i--
      }
      $this.ratePieNoAnimation(i)
      if (i > 100 || i < -100) { // 如果数字太大，取消动画效果
        $this.ratePieNoAnimation(number)
        clearInterval(t)
      }
    }, 2000 / (number > 0 ? number : -number))
  }
}
